<template>

  <div class="login">
    <div>
      <el-form
        :model="LoginForm"
        ref="LoginForm"
        :rules="rule"
        class="regform"
        label-width="0">

        <h3>用户登录</h3>

        <el-form-item prop="phone">
          <el-input
            type="text"
            v-model.number="LoginForm.phone"
            placeholder="手机号码">
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="LoginForm.password"
            placeholder="密码">
          </el-input>
        </el-form-item>

        <el-form-item >
          <el-button
            type="success"
            class="submitBtn"
            round
            @click.native.prevent="submit"
            :loading="logining">
            登录
          </el-button>
          <el-button
            type="primary"
            class="resetBtn"
            round
            @click.native.prevent="reset">
            重置
          </el-button>
          <hr>
          <p>没有账号，马上去<span class="to" @click="toreg">注册</span></p>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      let telCheck = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('电话号码是必须的'))
        } else if (!Number.isInteger(value)) {
          return callback(new Error('电话号码必须是数字'))
        } else if (value.toString().length !== 11) {
          return callback(new Error('电话号码必须是11位数字'))
        } else {
          callback()
        }
      }
      return {
        LoginForm: {
          phone: null,
          password: '',
        },
        logining: false,
        rule: {
          password: [
            {
              required: true,
              max: 32,
              min: 6,
              message: '密码是必须的,长度为6-32位',
              trigger: 'blur'
            }
          ],
          phone: [
            {
              required: true,
              validator: telCheck,
              trigger: 'blur'
            }
          ]
        }
      }
    },
    methods: {
      // ...
      submit () {
        this.$refs.LoginForm.validate(valid => {
          if (valid) {
            this.logining = false
            console.log('开始写入后台数据！');
            // let params = {"email":this.LoginForm.email,"password":this.LoginForm.password};
            let params = Object.assign({}, this.LoginForm);
            console.log(params.email);
            this.$api.login.login(params).then((res) => {
              console.log(res.code);
              if(res.code == 200){
                this.$message({
                  message: '认证成功！',
                  type: 'success'
                });
                console.log(JSON.stringify(res.data));
                sessionStorage.setItem('user', JSON.stringify(res.data)) // 保存用户到本地会话
                this.$store.state.isLogin = true;
                this.$store.state.name = res.data.name;
                this.$store.state.img = res.data.img;
                this.$store.state.createTime = res.data.createTime;
                this.$router.push("/");
              }else{
                this.$message.error('认证失败');
                // this.$router.go(0);
              }
            })
          } else {
            console.log('submit err')
          }
        })
      },
      reset () {
        this.$refs.LoginForm.resetFields()
      },
      toreg () {
        this.$router.push('/register')
      }
    }
  }
</script>

<style scoped lang="scss">
  .login {
    margin: 20px auto;
    width: 310px;
    background: #fff;
    box-shadow: 0 0 2px #B4BCCC;
    padding: 30px 30px 0 30px;
    border-radius: 5px;
  }
  .submitBtn {
    width: 65%;
  }
  .to {
    color: #FA5555;
    cursor: pointer;
  }
</style>
